<template>
  <div class="page-wrapper">
    <!-- 头部信息 -->
    <header>
      <div class="filter-part">
        <div class="filter-item">
          <DatePicker
            type="daterange"
            v-model="filterObj.time"
            placement="bottom-end"
            placeholder="请选择创建日期"
            separator="至"
            style="width: 200px"
          ></DatePicker>
        </div>
        <div class="filter-item">
          <Input
            v-model="filterObj.name"
            placeholder="客户名"
            clearable
          />
        </div>
        <div class="filter-item">
          <Input
            v-model="filterObj.telephone"
            placeholder="手机号"
            clearable
          />
        </div>
        <div class="filter-item">
          <Select
            v-model="filterObj.tradingChannels"
            :key="filterObj"
            filterable
            placeholder="支付类型"
            clearable
          >
            <Option value="all" key="all">全部</Option>
            <Option
              v-for="item in tradingChannelsList"
              :value="item.dictValue"
              :key="item.dictValue"
            >{{ item.dictName }}
            </Option
            >
          </Select>
        </div>
        <div class="filter-item">
          <Select
            v-model="filterObj.businessSources"
            :key="filterObj"
            filterable
            placeholder="订单类型"
            clearable
          >
            <Option value="all" key="all">全部</Option>
            <Option
              v-for="item in businessSourcesList"
              :value="item.dictValue"
              :key="item.dictValue"
            >{{ item.dictName }}
            </Option
            >
          </Select>
        </div>
        <div class="filter-item">
          <Select
            v-model="filterObj.orderStatus"
            :key="filterObj"
            filterable
            placeholder="订单状态"
            clearable
          >
            <Option value="all" key="all">全部</Option>
            <Option
              v-for="item in orderStatus"
              :value="item.dictValue"
              :key="item.dictValue"
            >{{ item.dictName }}
            </Option
            >
          </Select>
        </div>
        <div class="filter-btn-group">
          <Button
            type="primary"
            style="width: 51px; height: 35px"
            @click="handleSearch"
            icon="ios-search"
          ></Button>
          <Button
            style="width: 51px; height: 35px"
            @click="handleReset"
          >
            <i
              class="iconfont icon-gengxin"
              style="font-size: 14px; margin-right: 5px"
            ></i>
          </Button>
        </div>
      </div>
    </header>
    <div style="padding: 10px 0 20px">
      <Table
        class="m-table"
        stripe
        :columns="columns"
        :data="dataSource"
        :loading="loading"
        @on-change="onChange"
      ></Table>
    </div>
    <div class="page">
      <Page
        :total="count"
        :current="pageNo"
        :page-size="pageSize"
        show-total
        show-elevator
        @on-change="onChange"
      />
    </div>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import tablePlus from "@/components/tablePlus";
import Utils from "@/utils";
import {DatePicker} from "view-design";

const filterObj = {
  orderNumber: null,
  time: null,
  name: null,
  telephone: null,
  businessSources: null, //'all'
  orderStatus: null, //'all'
};
export default {
  components: {
    tablePlus,
    DatePicker,
  },
  data() {
    const that = this;
    return {
	  tradingChannelsList: [
        {dictName: "微信", dictValue: 0},
        {dictName: "支付宝", dictValue: 1},
        {dictName: "线下支付", dictValue: 2},
        {dictName: "医保支付", dictValue: 4}
      ],	
      businessSourcesList: [
        {dictName: "咨询", dictValue: 0},
        {dictName: "巡诊", dictValue: 1},
        {dictName: "复诊", dictValue: 2},
        {dictName: '续方', dictValue: 3},
        {dictName: "用药咨询", dictValue: 4},
        {dictName: "购药", dictValue: 5},
        {dictName: "预约挂号", dictValue: 6},
        {dictName: "家医签约", dictValue: 7},
        {dictName: "远程门诊", dictValue: 8},
        {dictName: '直播', dictValue: 9},
        {dictName: '点播', dictValue: 10},
        {dictName: '诊间缴费（线上）', dictValue: 11},
        {dictName: '充值', dictValue: 12},
        {dictName: '住院押金缴费', dictValue: 13},
        {dictName: '院后随访', dictValue: 14},
        {dictName: '外延处方', dictValue: 15},
        {dictName: "远程会诊", dictValue: 16},
        {dictName: '病历复印', dictValue: 17},
        {dictName: '检查检验预约', dictValue: 18},
        {dictName: "检查预约", dictValue: 19},
        {dictName: "检验预约", dictValue: 20},
        {dictName: "体检预约", dictValue: 21},
        {dictName: "手术预约", dictValue: 23},
        {dictName: "互联网缴费", dictValue: 22},
        {dictName: "线上就诊", dictValue: 30},
      ],
      orderStatus: [
        {dictName: "待付款", dictValue: 0},
        {dictName: "已付款", dictValue: 1},
        {dictName: "已取消", dictValue: 2},
        {dictName: "已退款", dictValue: 3},
        {dictName: "支付中", dictValue: 4},
        {dictName: "支付失败", dictValue: 5},
        {dictName: "退款中", dictValue: 6},
        {dictName: "部分退款", dictValue: 7},
      ],
      filterObj: {...filterObj},
      dataSource: [],
      pageNo: 1,
      pageSize: 10,
      count: 0,
      columns: [
        {
          type: "sum",
          width: 80,
          align: "center",
          title: "排序",
          render: (h, params) => {
            let sum =
              (this.pageNo - 1) * this.pageSize +
              params.index +
              1;
            return h("span", sum);
          },
        },
        {
          key: "orderNumber",
          title: "订单号",
          width: 260,
          align: "center",
        },
        {key: "name", title: "用户", align: "center"},
        {key: "telephone", title: "手机号", align: "center"},
        {key: "tradingChannels", title: "支付类型", align: "center",
          render(h, params) {
            return (
              that.tradingChannelsList.filter(
                (item) =>
                  item.dictValue == params.row.tradingChannels
              )[0] || {}
            ).dictName;
          }        
        },
        {
          key: "businessSources",
          title: "订单类型",
          align: "center",
          render(h, params) {
            return (
              that.businessSourcesList.filter(
                (item) =>
                  item.dictValue == params.row.businessSources
              )[0] || {}
            ).dictName;
          },
        },
        {key: "amt", title: "订单金额", align: "center"},
        {key: "createTime", title: "创建时间", align: "center"},
        {key: "notifyTime", title: "支付完成时间", align: "center"},
        {
          key: "orderStatus",
          title: "状态",
          align: "center",
          render(h, params) {
            return (
              that.orderStatus.filter(
                (item) =>
                  item.dictValue == params.row.orderStatus
              )[0] || {}
            ).dictName;
          },
        },
        {
          key: "_operate",
          title: "设置",
          align: "center",
          render(h, params) {
            const {
              id,
              businessSources,
              orderStatus
            } = params.row;

            //if (orderStatus !== 1) { // 假设只有 orderStatus 为 'someExpectedValue' 时才显示
              //return null; // 或者返回一个空的 h() 调用，如 h('span', '')，但通常返回 null 更合适
            //}

            return h(
              "span",
              {
                props: {
                  type: "primary",
                },
                style: {
                  color: "#5362e1",
                  margin: "0px 6px",
                },
                on: {
                  click() {
					  if(businessSources==6){//预约挂号
						  that.$router.push({
		                    name: 'ordersAppointDetail',
		                    query: {orderId: id}
		                  })
					  }else if(businessSources==11){//诊间缴费
						  that.$router.push({
		                    name: 'ordersManageDetail',
		                    query: {orderId: id}
		                  })
					  }
                  },
                },
              },
              '详情'
            );
          },
        },
      ],
      loading: false,
    };
  },
  created() {
    let breadList = [
      {path: "/index", title: "首页"},
      {
        path: "",
        title: "订单管理",
      },
      {
        path: "/index/operation/orders/feedBackMgt/list",
        title: "退费审批管理",
      },
    ];
    this.$emit("changeBreadList", breadList);
    const {filterObj} = this.$route.query;
    filterObj &&
    (this.filterObj = JSON.parse(decodeURIComponent(filterObj)));

    if (this.$store.state.resourceUrl == 'gphealth') {
      this.businessSourcesList = this.businessSourcesList.filter(col => col.dictName !== '问诊' && col.dictName !== '购药' && col.dictName !== '复诊续方');
    }
  },
  mounted() {
    this.refundPage(1);
  },
  methods: {
    handleSearch() {
      this.pageNo = 1;
      this.refundPage(1);
    },
    handleReset() {
      this.filterObj = {...filterObj};
      this.pageNo = 1;
      this.refundPage(1);
    },
    onChange(index) {
      this.pageNo = index;
      this.refundPage(index);
    },
    jumpTo(path, query = {}) {
      this.$router.push({
        path,
        query: Object.assign(
          {
            filterObj: encodeURIComponent(
              JSON.stringify(this.filterObj)
            ),
          },
          query
        ),
      });
    },
    //订单退款分页列表
    refundPage(val) {
      const request = {
        pageNo: val,
        pageSize: 10,
        orderNumber: this.filterObj.orderNumber,
        startTime: this.filterObj.time
          ? Utils.getNowDateBySpecialFormat(this.filterObj.time[0])
          : null,
        endTime: this.filterObj.time
          ? Utils.getNowDateBySpecialFormat(this.filterObj.time[1])
          : null,
        name: this.filterObj.name,
        telephone: this.filterObj.telephone,
        businessSources: this.filterObj.businessSources,
        orderStatus: this.filterObj.orderStatus,
        tradingChannels: this.filterObj.tradingChannels,
      };
      this.$axios.post(api.wxOrderRefundFindPage, request).then((res) => {
        console.log("res=========",res)
        this.count = res.data.object.total;
        this.dataSource = res.data.object.records;
      });
    },
    //更改是否可以退款
    auditRefundFlagChange(id,auditRefundFlag) {
      const request = {
        id,
        auditRefundFlag
      };
      console.log("request",request)
      this.$axios.post(api.wxOrderauditRefundFlagChange, request).then((res) => {
        this.count = res.data.object.total;
        this.dataSource = res.data.object.records;
      });
    },
  },
};
</script>

<style scoped lang="less">
.page-wrapper {
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;

  .m-table {
    margin: 10px 0;
  }

  .filter-part {
    display: flex;
    flex-wrap: wrap;

    .filter-item {
      display: flex;
      margin: 10px 10px 10px 0;

      label {
        white-space: nowrap;
        line-height: 32px;
        padding-left: 5px;
        text-align: right;
      }

      .input {
        width: 220px;
      }

      .select {
        width: 70px;
      }
    }

    .filter-btn-group {
      margin: 10px 10px 10px 0;
      flex: 0 0 auto;
    }
  }

  .page {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>
